<template>
  <div>
    <h1>App根组件</h1>
    <hr>
    <my-table :data="goodsList">
      <template #header>
        <th>序号</th>
        <th>商品名称</th>
        <th>价格</th>
        <th>标签</th>
        <th>操作</th>
      </template>
      <template #body={row,index}>
        <td>{{index+1}}</td>
        <td>{{row.goods_name}}</td>
        <td>￥{{row.goods_price}}</td>
        <td>
          <!-- 基于当前行的 inputVisible，来控制 input 和 button 的按需展
示-->
          <input type="text" class="form-control form-control-sm form-ipt" v-if="row.goods_state" v-focus>
          <button type="button" class="btn btn-primary btn-sm" v-else @click="row.goods_state=true">+Tag</button>
          <!-- 循环渲染tag标签 -->
          <span class="badge badge-warning ml-2" v-for="item in row.goods_count" :key="item">{{item}}</span>
        </td>
        <td>
          <button type="button" class="btn btn-danger btn-sm" @click="onRemove(row.goods_id)">删除</button>
        </td>
      </template>
    </my-table>
  </div>
</template>

<script>
import MyTable from './components/my-table/MyTable.vue'
export default {
  name: 'MyApp',
  components: {
    MyTable
  },
  data() {
    return {
      goodsList: []
    }
  },
  created() {
    this.getGoodsList()
  },
  methods: {
    async getGoodsList() {
      const { data: res } = await this.$http.get('/api/cart')
      if (res.status !== 200) return alert('获取数据失败')
      this.goodsList = res.list
      // console.log(res)
    },
    onRemove(goods_id) {
      this.goodsList = this.goodsList.filter(x => x.goods_id != goods_id)
    }
    // directives: {
    //   focus(el) {
    //     el.focus()
    //   }
    // }
  },
  directives: {
    focus(el) {
      el.focus()
    }
  }
}
</script>

<style lang="less" scoped>
.form-ipt {
  width: 80px;
  display: inline;
}
</style>